<template>
    <div>
        <div id="safeSetting">
            <p class="page-title">修改登陆密码</p>
            <div class="container padder">
                <div class="form padder-v">
                    <el-form :model="loginInfo" status-icon :rules="loginRules" ref="loginForm" label-width="185px"
                             class="demo-ruleForm el-form">
                        <el-form-item label="请输入旧登录密码：" prop="laomima">
                            <el-input type="password" v-model="loginInfo.laomima" placeholder="请输入旧登录密码（默认123123）"
                                      autocomplete="off">

                            </el-input>
                        </el-form-item>
                        <el-form-item label="请输入新登录密码：" prop="xinmima">
                            <el-input type="password" v-model="loginInfo.xinmima" autocomplete="off"
                                      placeholder="请输入新登录密码">

                            </el-input>
                        </el-form-item>
                        <el-form-item label="再次输入新登录密码：" prop="rePass">
                            <el-input type="password" v-model="loginInfo.rePass" autocomplete="off"
                                      placeholder="再次输入新登录密码">

                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div class="bottom text-center">
                        <el-button type="primary" @click="changeLoginPwd">确认修改</el-button>
                    </div>
                </div>
                <!-- <div class="small-title">修改支付密码</div>
                 <div class="form">
                     <el-form :model="payInfo" status-icon :rules="payRules" ref="payForm" label-width="185px"
                              class="demo-ruleForm el-form">
                         <el-form-item label="请输入旧支付密码：" prop="pay_laomima">
                             <el-input type="password" v-model="payInfo.pay_laomima" placeholder="请输入旧支付密码（默认123123）"
                                       autocomplete="off">

                             </el-input>
                         </el-form-item>
                         <el-form-item label="请输入新支付密码：" prop="pay_xinmima">
                             <el-input type="password" v-model="payInfo.pay_xinmima" autocomplete="off"
                                       placeholder="请输入新支付密码">

                             </el-input>
                         </el-form-item>
                         <el-form-item label="再次输入新支付密码：" prop="rePass">
                             <el-input type="password" v-model="payInfo.rePass" autocomplete="off"
                                       placeholder="再次输入新支付密码">

                             </el-input>
                         </el-form-item>
                     </el-form>
                     <div class="bottom text-center">
                         <el-button type="primary" @click="changePayPwd">确认修改</el-button>
                     </div>
                 </div>-->

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'safeSetting',
        components: {},
        data() {
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.loginInfo.xinmima) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            let validatePass1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.payInfo.pay_xinmima) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                loginInfo: {
                    laomima: '',
                    xinmima: '',
                    rePass: ''
                },
                loginRules: {
                    laomima: [{required: true, message: '请输入旧登陆密码'}, {
                        min: 6,
                        message: `密码长度不能小于6个字符`,
                        trigger: 'blur'
                    }],
                    xinmima: [{required: true, message: `请输入新登陆密码`, trigger: 'blur'},
                        {min: 6, message: `密码长度不能小于6个字符`, trigger: 'blur'},],
                    rePass: [{required: true, message: '请再次输入新登陆密码'}, {validator: validatePass, trigger: 'blur'}],
                },
                payInfo: {
                    pay_laomima: '',
                    pay_xinmima: '',
                    rePass: ''
                },
                payRules: {
                    pay_laomima: [{required: true, message: '请输入旧登陆密码'}, {
                        min: 6,
                        message: `密码长度不能小于6个字符`,
                        trigger: 'blur'
                    }],
                    pay_xinmima: [{required: true, message: `请输入${name}密码`, trigger: 'blur'},
                        {min: 6, message: `密码长度不能小于6个字符`, trigger: 'blur'},],
                    rePass: [{required: true, message: '请再次输入新登陆密码'}, {validator: validatePass1, trigger: 'blur'}],
                },

            }
        },
        computed: {},
        methods: {
            //修改登陆密码
            changeLoginPwd() {
                this.$refs['loginForm'].validate(valid => {
                    if (valid) {
                        this.$axios.post(`/api/User/Change_Password`, this.loginInfo)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$message.success('修改成功，请重新登陆');
                                    localStorage.removeItem('user');
                                    this.$store.commit('SET_USER', null);
                                    this.$router.push('/login')
                                }
                            })
                    }
                })

            },
            //修改支付密码
            changePayPwd() {
                this.$refs['payForm'].validate(valid => {
                    if (valid) {
                        this.$axios.post(`/api/User/Change_pay_Password`, this.payInfo)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$message.success('支付密码修改成功');
                                }
                            })
                    }
                })

            }
        },
        mounted() {
        },
    }
</script>

<style lang="less" scoped>
    .container {
        padding: 25px 0;

        .form {
            width: 600px;
            margin: 20px 0;
        }
    }
</style>
